<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生注册界面</title>
    <!--semantic-ui-->
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" >
    <!--    用来解决type="file"的样式-->
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

    <!--    一定需要引入这个包-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


    <style>
        body{
            background-image: url("/images/stulogin.jpg");
            height: 100%;
            width: 100%;
            background-size: cover;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body >
<!--菜单-->
<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item"><a th:href="@{/}" style="font-size: 20px">主页面</a></li>
    <li class="layui-nav-item "><a th:href="@{/login}" style="font-size: 20px">登录</a></li>
    <li class="layui-nav-item "><a th:href="@{/register}" style="font-size: 20px">学生注册</a></li>
    <li class="layui-nav-item layui-this"><a th:href="@{/teacherregister}" style="font-size: 20px">教师注册</a></li>
</ul>
<!--菜单-->
<br>

<!--<div class="login layui-anim layui-anim-up">-->
<div class="modal-dialog modal-lg">
    <div class="modal-content">
<!--注册信息输入-->
    <form method="post" class="layui-form" th:action="@{/tea_registersubmit}" enctype="multipart/form-data">
<!--        <h1 class="ui blue dividing header">教师注册</h1>-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required  lay-verify="required|username" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">Birth</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="birth" lay-verify="required" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" required lay-verify="required|email"  placeholder="信息将准确发送到您邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="images" required lay-verify="required|image" autocomplete="off" id="user-image">
                </a>
            </div>
            <!-- 显示图像预览 -->
            <img style="width: 180px;height: 180px;" class="ui medium circular image" id="img">
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">班级</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="class_id"  lay-verify="required" lay-search="">-->
<!--                    <option th:each="class:${classtypes}" th:value="${class.getId()}" th:text="${class.getClass_name()}"></option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
<!--        <hr class="hr20" >-->
<!--        <a th:href="@{/teacherlogin}" class="layui-btn layui-btn-normal" style="width:100%;">返回登录</a>-->
<!--        <hr class="hr20" >-->


    </form>
    <!--注册信息输入-->
</div>
</div>

<script>
    $(function(){
        //上传图像预览
        $('#user-image').on('change',function() {
            $('#img').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    });

        layui.use('form', function(){
            var form = layui.form;

            form.verify({
                //将用户名是否可用作为验证条件 表单提交时触发
                username:function (value) {
                    var datas={username: value};
                    var message='';

                    $.ajax({
                        type: "POST",
                        url:'/checkusername',
                        async: false, //改为同步请求
                        contentType:'application/json;charset=UTF-8',
                        data:JSON.stringify(datas),
                        dataType:'json',
                        success:function (data) {
                            if (data){

                            }else {
                                message="用户名已存在，请重新输入"
                            }

                        }
                    });
//需要注意 需要将返回信息写在ajax方法外
                    if (message !== '')
                        return message;
                },
                image: function (value, item) {
                    if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
                        return '图片格式错误';
                    }
                }
            });
            // layer.msg('玩命卖萌中', function(){
            //   //关闭后的操作
            //   });
            //监听提交
            // form.on('submit(login)', function(data){
            //     // alert(888)
            //     layer.msg(JSON.stringify(data.field),function(){
            //         location.href='index.html'
            //     });
            //     return false;
            // });
        });

        $(document).ready(function () {
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#test1'
                    ,type: 'date'//指定元素
                });
            });
        })
</script>
<!-- 底部结束 -->
</body>
</html>